<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/element-ui.min2.15.6.css">
    <style>
        @import 'https://at.alicdn.com/t/font_2273296_r43v769i62g.css';
        .g6-grid-container {
            border: 1px solid saddlebrown;
        }
        
        .g6-component-toolbar {
            left: unset !important;
            right: 1%;
            top: 70px !important;
        }
        
        .g6-component-toolbar li {
            clear: both;
        }
        
        .g6-component-contextmenu {
            padding: 0 8px !important;
            cursor: pointer;
        }
        
        #container {
            margin-top: 2%;
        }
        
        .g6-grid-container {
            width: 99% !important;
        }
    </style>
</head>

<body>
    <div id="allBase">
        <el-switch v-model="switchValue" @change="ModelChange" active-text="编辑模式" inactive-text="阅读模式">
        </el-switch>

        <el-button @click="LookJSON">查看JSON</el-button>
        {{JSON}}

        <el-dialog title="填报" :visible.sync="showDialog" width="30%" :before-close="BeforeClose">
            <el-form>
                <el-form-item label="工作内容" v-show="firstDialog">
                    <el-input v-model="form.WorkContent"></el-input>
                </el-form-item>

                <el-form-item label="内容分解" v-show="secondDialog">
                    <el-input v-model="form.ResolveContent"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="BeforeClose">取 消</el-button>
                <el-button type="primary" @click="AppendFirst">确 定</el-button>
            </span>
        </el-dialog>



        <!-- <el-dialog title="填报" :visible.sync="firstDialog" width="30%">
            <el-form>
                <el-form-item label="工作内容">
                    <el-input v-model="form.WorkContent"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="firstDialog = false">取 消</el-button>
                <el-button type="primary" @click="AppendFirst">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="secondDialog" width="30%">
            <span>内容分解</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="secondDialog = false">取 消</el-button>
                <el-button type="primary" @click="AppendSecond">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="thirdDialog" width="30%">
            <span>内容细分</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="thirdDialog = false">取 消</el-button>
                <el-button type="primary" @click="AppendThird">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="fourthDialog" width="30%">
            <span>细分项</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fourthDialog = false">取 消</el-button>
                <el-button type="primary" @click="AppendFourth">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="fifthDialog" width="30%">
            <span></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fifthDialog = false">取 消</el-button>
                <el-button type="primary" @click="fifthDialog = false">确 定</el-button>
            </span>
        </el-dialog> -->

        <el-dialog title="提示" :visible.sync="showHelper" width="30%">
            <span>帮助</span>
        </el-dialog>

        <div id="container" style="height: 100%;">

        </div>
    </div>
</body>
<script src="./js/jquery.2.0.3.min.js"></script>
<script src="./js/g6.min.js"></script>

<script src="./js/data.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/element-ui2.15.6.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/G6TreeMap.js"></script>

<script>
    var vue = new Vue({
        el: "#allBase",
        data() {
            return {
                msg: "我是vue",
                showDialog: false,
                switchValue: true,
                firstDialog: false,
                secondDialog: false,
                thirdDialog: false,
                fourthDialog: false,
                fifthDialog: false,
                showHelper: false,
                currentNode: null,
                JSON: "",
                form: {
                    WorkContent: "",
                    ResolveContent: ""
                }
            }
        },
        methods: {
            LookJSON() {
                console.log(treeGraph.cfg.data);
            },
            ModelChange() {
                treeGraph.setMode(this.switchValue ? 'edit' : 'default');
            },
            generateNodeId() {
                return `${+new Date() + (Math.random() * 10e5).toFixed(0)}`;
            },
            OpenFirst(e, evt) {
                console.log("evt", evt);
                this.currentNode = evt;
                if (e > -1 && e < 4) {
                    switch (e) {
                        case 0:
                            this.firstDialog = true;
                            break;
                        case 1:
                            this.secondDialog = true;
                            break;
                        case 2:
                            this.thirdDialog = true;
                            break;
                        case 3:
                            this.fourthDialog = true;
                            break;
                        default:
                            break;
                    }
                    this.showDialog = true;
                }
            },
            BeforeClose() {
                this.showDialog = false;
                this.fourthDialog = this.thirdDialog = this.secondDialog = this.firstDialog = false;
            },
            OpenSecond() {

            },
            OpenThird() {

            },
            OpenFourth() {

            },

            AppendFirst() {
                var model = this.currentNode.item.getModel();
                console.log("更新前", model);
                model.WorkContent = this.form.ResolveContent;
                // treeGraph.updateChild(model, null)
                console.log("更新后", model);
                // var id = this.generateNodeId();
                // const cfg = {
                //     id,
                //     label: this.form.WorkContent,
                //     depth: model.Depth + 1,
                //     WorkContent: this.form.WorkContent,
                //     children: [],
                // };

                // treeGraph.addChild(cfg, model.id);
                if (this.firstDialog) {

                } else if (this.secondDialog) {

                } else if (this.thirdDialog) {

                } else if (this.fourthDialog) {

                }
                this.showDialog = false;
                this.fourthDialog = this.thirdDialog = this.secondDialog = this.firstDialog = false;
            },
            AppendSecond() {

            },
            AppendThird() {

            },
            AppendFourth() {

            }
        },
        filters: {},
        created() {
            window.OpenFirst = this.OpenFirst;
        },
        mounted() {},
        updated() {},
        computed: {

        },
    })
</script>

</html>